<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ul1>li{
            /* 浮动使其处于一行 */
            float: left;
            /* 太窄  变宽 */
            width: 100px;
            
        }
        li{
            /* 小圆点不想要 */
            list-style: none;
        }
        .ul1>li>ul{
            margin-left: -40px;
            display: none;
        }
    </style>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <script>
        // 页面加载完毕后执行
        $(function(){
            // > 子元素   空格 子孙元素
            // $('.ul1>li').mouseover(function(){
            //     $(this).children('ul').slideDown();
            // });

            // // 鼠标离开
            // $('.ul1>li').mouseout(function(){
            //     $(this).children('ul').slideUp();
            // });

            // hover（）  鼠标切换
            // 如果写一个方法  那么鼠标进入和出来都执行这个方法
            // jquery 有一个事件列表  只要触发事件 就会将事件函数放入列表
            // 然后依次执行   就会造成 事件堵塞
            // 使用stop（） 可以解决  stop返回值是这个对象本身
            $('.ul1>li').hover(function(){
                // console.log(111);
                $(this).children('ul').stop().slideToggle();
                // $(this).children('ul').slideToggle();
            });
        });
    </script>
   
    <ul class="ul1">
        <li>标题
            <ul>
                <li>子项</li>
                <li>子项</li>
                <li>子项</li>
                <li>子项</li>
            </ul>
        </li>
        <li>标题
            <ul>
                <li>子项</li>
                <li>子项</li>
                <li>子项</li>
                <li>子项</li>
            </ul>
        </li>
        <li>标题
            <ul>
                <li>子项</li>
                <li>子项</li>
                <li>子项</li>
                <li>子项</li>
            </ul>
        </li>
        <li>标题
            <ul>
                <li>子项</li>
                <li>子项</li>
                <li>子项</li>
                <li>子项</li>
            </ul>
        </li>
    </ul>

   
</body>
</html>